<template>
  <view class="petinfor">
    <view class="addpets-form">
      <view class="form">
        <uv-form labelPosition="left" :model="model1" :rules="rules" ref="form">
          <!-- 宠物名字 -->
          <uv-form-item borderBottom prop="userInfo.name">
            宠物名字
            <uv-input border="none" v-model="model1.userInfo.name" :placeholder="cwlist.name" inputAlign="right">
            </uv-input>
          </uv-form-item>
          <!-- 类型 -->
          <uv-form-item borderBottom prop="userInfo.ti">
            类型<uv-input :placeholder="cwlist.type" border="none" v-model="type" @click="on" suffixIcon="arrow-down"
              suffixIconStyle="color: #909399" inputAlign="right"></uv-input>
            <uv-picker ref="pic" :columns="actions" @confirm="conm"></uv-picker>
          </uv-form-item>
          <!-- 年龄 -->
          <uv-form-item borderBottom prop="userInfo.age">
            年龄
            <uv-input border="none" v-model="model1.userInfo.age" :placeholder="cwlist.age" inputAlign="right">
            </uv-input>
          </uv-form-item>
          <!-- 性别 -->
          <uv-form-item borderBottom prop="userInfo.sex">
            性别<uv-input :placeholder="cwlist.sex" border="none" v-model="sex" @click="openPicker"
              suffixIcon="arrow-down" suffixIconStyle="color: #909399" inputAlign="right"></uv-input>
            <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
          </uv-form-item>
          <!-- 体型 -->
          <uv-form-item borderBottom prop="userInfo.ti">
            体型<uv-input :placeholder="cwlist.shape" border="none" v-model="tixing" @click="openPickerr"
              suffixIcon="arrow-down" suffixIconStyle="color: #909399" inputAlign="right"></uv-input>
            <uv-picker ref="pickerr" :columns="ti" @confirm="confirmm"></uv-picker>
          </uv-form-item>
          <!-- 主人描述 -->
          <uv-form-item> 主人描述 </uv-form-item>
          <uv-form-item borderBottom>
            <uv-textarea customStyle="background-color: #f7f8fa;" v-model="textara1"
              :placeholder="cwlist.description"></uv-textarea>
          </uv-form-item>
          <!-- 备注信息 -->
          <uv-form-item> 备注信息 </uv-form-item>
          <uv-form-item borderBottom>
            <uv-textarea customStyle="background-color: #f7f8fa;" v-model="textara2"
              :placeholder="cwlist.remark"></uv-textarea>
          </uv-form-item>
          <!-- 宠物图片 -->
          <uv-form-item> 宠物图片 </uv-form-item>
          <uv-form-item borderBottom>
            <uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" width="80px" height="80px" radius="10"></uv-image>
          </uv-form-item>
          <!-- 宠物修改信息显示 -->
          <uv-popup ref="popup" bgColor="none" :closeable="true">
            <view class="tanchu">
              宠物修改信息显示
              <uv-cell-group>
                <uv-cell title="宠物名字" :value="newlist.name"></uv-cell>
                <uv-cell title="宠物类型" :value="newlist.type"></uv-cell>
                <uv-cell title="宠物年龄" :value="newlist.age"></uv-cell>
                <uv-cell title="宠物性别" :value="newlist.sex"></uv-cell>
                <uv-cell title="宠物体形" :value="newlist.shape"></uv-cell>
              </uv-cell-group>
            </view>
          </uv-popup>
          <!-- 底部按钮 -->
          <uv-form-item class="footer">
            <uv-button type="primary" text="删除" size="large" shape="circle" :custom-style="customStyle"
              @click="reset"></uv-button>
            <uv-button type="primary" text="保存" shape="circle" :custom-style="customStyle2" @click="submit"></uv-button>
          </uv-form-item>
          <button @click="open" style="width: 100%;background-color: #008c8c;color: white;">宠物修改信息显示</button>
        </uv-form>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    uniRequest
  } from "../../../utils/request/request"
  export default {
    data() {
      return {
        tixing: "",
        type: "",
        sex: "",
        ti: [
          ["小型", "中型", "大型", "超大型"]
        ],
        columns: [
          ["男", "女"]
        ],
        fileList1: [],
        textara1: "",
        textara2: "",
        model1: {
          userInfo: {
            name: "",
            type: "",
            age: "",
            sex: "",
            ti: "",
          },
        },
        actions: [
          ["猫猫", "狗狗", "卡皮巴拉"]
        ],
        rules: {
          "userInfo.name": {
            type: "string",
            required: true,
            message: "请填写姓名",
            trigger: ["blur", "change"],
          },
          sex: {
            type: "string",
            required: true,
            message: "请选择性别",
            trigger: ["blur", "change"],
          },
          "userInfo.age": {
            type: "string",
            required: true,
            message: "请填写年龄",
            trigger: ["blur", "change"],
          },
          ti: {
            type: "string",
            required: true,
            message: "请选择体型",
            trigger: ["blur", "change"],
          },
          type: {
            type: "string",
            required: true,
            message: "请选择类型",
            trigger: ["blur", "change"],
          },
        },
        radio: "",
        switchVal: false,
        cwlist: '',
        newlist: ''
      };
    },
    created() {
      // 用户宠物具体信息查询
      const id = this.$route.query.id
      console.log('123', id)
      const that = this
      uniRequest('pet/list?server=1', function(err, data) {
        if (err) {
          // 错误
          console.log(err)
        } else {
          console.log('"成功了"', data)
          that.cwlist = data
        }
      }, 'POST', {
        id: id
      });
    },
    methods: {
      back() {
        uni.navigateBack({
          delta: 1, // 返回1个，如果是2，返回2个页面
        });
      },

      // 提交
      submit() {
        // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
        this.$refs.form
          .validate()
          .then((res) => {
            uni.showToast({
              icon: "success",
              title: "校验通过",
            });
          })
          .catch((errors) => {
            uni.showToast({
              icon: "error",
              title: "校验失败",
            });
          });
        const id = this.$route.query.id
        const name = this.model1.userInfo.name
        const type = this.type
        const age = this.model1.userInfo.age
        const sex = this.sex
        const shape = this.tixing
        const description = this.textara1
        const remark = this.textara2
        console.log(id, name, type, age, sex, shape, description, remark)
        // 宠物修改信息
        uniRequest('pet/update?server=1', function(err, data) {
          if (err) {
            // 错误
            console.log(err)
          } else {
            console.log('"宠物修改信息"', data)
          }
        }, 'POST', {
          id: id,
          name: name,
          type: type,
          sex: sex,
          age: age,
          description: description,
          image: '#',
          shape: shape,
          remark: remark,
        });

      },
      open() {
        const id = this.$route.query.id
        const name = this.model1.userInfo.name
        const type = this.type
        const age = this.model1.userInfo.age
        const sex = this.sex
        const shape = this.tixing
        const description = this.textara1
        const remark = this.textara2
        // 宠物修改信息显示
        const that = this
        uniRequest('pet/edit?server=1', function(err, data) {
          if (err) {
            // 错误
            console.log(err)
          } else {
            console.log('"宠物修改信息显示"', data)
            that.newlist = data
          }
        }, 'POST', {
          id: id,
          name: name,
          type: type,
          sex: sex,
          age: age,
          description: description,
          image: '#',
          shape: shape,
          remark: remark,
        });
        this.$refs.popup.open('top');
      },
      reset() {
        // this.$refs.form.resetFields();
        // this.$refs.form.clearValidate();
        const id = this.$route.query.id
        const name = this.model1.userInfo.name
        const type = this.type
        const age = this.model1.userInfo.age
        const sex = this.sex
        const shape = this.tixing
        const description = this.textara1
        const remark = this.textara2
        console.log(id, name, type, age, sex, shape, description, remark)
        // 宠物信息删除
        uniRequest('pet/delete?server=1', function(err, data) {
          if (err) {
            // 错误
            console.log(err)
          } else {
            console.log('"成功了"', data)
          }
        }, 'POST', {
          id: id,
          // name: name,
          // type: type,
          // sex: sex,
          // age: age,
          // description: description,
          // image: '#',
          // shape: shape,
          // remark: remark,
        });
      },
      // 类型选择
      showSexSelect() {
        this.$refs.sexSelect.open();
        this.hideKeyboard();
      },
      // 类型选择返回结果
      sexSelect(e) {
        this.model1.userInfo.sex = e.name;
        // 对部分表单字段进行校验
        this.$refs.form.validateField("userInfo.sex", (err) => {
          // 处理错误后的逻辑
        });
      },
      hideKeyboard() {
        uni.hideKeyboard();
      },

      openPicker() {
        this.$refs.picker.open();
      },
      confirm(e) {
        console.log("confirm", e);
        this.sex = e.value[0];
      },
      openPickerr() {
        this.$refs.pickerr.open();
      },
      confirmm(e) {
        console.log("confirm", e);
        this.tixing = e.value[0];
      },
      on() {
        this.$refs.pic.open();
      },
      conm(e) {
        console.log("confirm", e);
        this.type = e.value[0];
      },
      change(e) {
        // console.log('弹窗状态改变：', e);
      }
    },
    computed: {
      customStyle() {
        return {
          width: "280rpx",
          height: "80rpx",
          background: "#d6f1ed",
          border: "1px solid #d6f1ed",
          color: "#008c8c",
          borderRadius: "40rpx", //圆角
          marginLeft: "40rpx",
        };
      },
      customStyle2() {
        return {
          width: "280rpx",
          height: "80rpx",
          background: "#008c8c",
          border: "1px solid #008c8c",
          color: "#fff",
          borderRadius: "40rpx", //圆角
          marginLeft: "60rpx",
        };
      },
    },
  };
</script>

<style lang="scss">
  @import url("./petinfor.css");
</style>